<style lang="less">
    @import "./home.less";
    @import "../../styles/common.less";
</style>
<template>
    <div class="home-main">
      <div class="ivu-card-body ivu-card" :style="{marginBottom: '10px'}">  
            <Row class="mian_to_do_items">
                <!-- <Col span="8">
                    <span class="mian_todo_notice">您有3条待处理的用户找房需求</span>
                    <Button type="ghost">立即处理</Button>
                </Col> -->
                <Col span="8">
                    <span class="mian_todo_notice">您有{{audit}}条待处理的实名认证审核</span>
                    <Button type="ghost" @click="doAudit">立即处理</Button>
                </Col>
                <Col span="8">
                    <span class="mian_todo_notice">您有{{withdraw}}条待处理的提现审核</span>
                    <Button type="ghost" @click="doWithdraw">立即处理</Button>
                </Col>
            </Row>
       </div>
       <div class="mian_chargeback_containter ivu-card ivu-card-bordered" :style="{marginBottom: '10px'}">
           <div class="mian_title_line slider_part_padding">
               <span class="mian_line_sliderbar"></span>
               <span class="mian_title">管理费扣款明细</span>
                <Select v-model="search.withhold" @on-change="changeWithhold" style="width:80px">
                    <Option :value="1" :key="1">今日</Option>
                    <Option :value="2" :key="2">这周</Option>
                </Select>
           </div>
           <div class="mian_content_contaitner white_bg slider_part_padding">
               <Row>
                <Col span="8">
                   <div class="mian_chargeback_details">
                       <div class="mian_line_cl block_box t_c">
                          <div class="mian_title">应扣款金额</div>
                          <div class="mian_number">¥{{withhold.totals_money}}</div>
                       </div>
                       <div class="mian_line_cl block_box t_c">
                           <div class="mian_title">应扣款笔数</div>
                          <div class="mian_number">{{withhold.totals}}</div>
                       </div>
                   </div>
                </Col>
               <Col span="8">
                   <div class="mian_chargeback_details">
                       <div class="mian_line_cl block_box t_c">
                          <div class="mian_title">实际扣款金额</div>
                          <div class="mian_number">¥{{withhold.reality_money}}</div>
                       </div>
                       <div class="mian_line_cl block_box t_c">
                           <div class="mian_title">实际扣款笔数</div>
                          <div class="mian_number">{{withhold.reality}}</div>
                       </div>
                   </div>
                </Col>
                  <Col span="8">
                   <div class="mian_chargeback_details">
                       <div class="mian_line_cl block_box t_c">
                          <div class="mian_title">扣款失败金额</div>
                          <div class="mian_number">¥{{withhold.failed_money}}</div>
                       </div>
                       <div class="mian_line_cl block_box t_c">
                           <div class="mian_title">扣款失败笔数</div>
                          <div class="mian_number">{{withhold.failed}}</div>
                       </div>
                   </div>
                </Col>
            </Row>
           </div>
       </div>
        <!-- <div class="mian_chargeback_containter ivu-card ivu-card-bordered" :style="{marginBottom: '10px'}">
           <div class="mian_title_line slider_part_padding">
               <span class="mian_line_sliderbar"></span>
               <span class="mian_title">租金进账明细</span>
                <Select v-model="model1" style="width:80px">
                    <Option :value="1" :key="1">今日</Option>
                    <Option :value="2" :key="2">这周</Option>
                </Select>
           </div>
            <div class="mian_chargeback_details white_bg slider_part_padding">
                       <div class="mian_line_cl block_box t_c">
                          <div class="mian_title">收款金额</div>
                          <div class="mian_number">¥6000.00</div>
                       </div>
                       <div class="mian_line_cl block_box t_c">
                           <div class="mian_title">收款笔数</div>
                          <div class="mian_number">60</div>
                       </div>
                   </div>
        </div> -->
        <div class="mian_chargeback_containter ivu-card">
           <div class="mian_title_line slider_part_padding">
               <span class="mian_line_sliderbar"></span>
               <span class="mian_title">充值/提现</span>
                <Select v-model="search.capital" @on-change="changeCapital" style="width:80px">
                    <Option :value="1" :key="1">今日</Option>
                    <Option :value="2" :key="2">这周</Option>
                </Select>
           </div>
        </div>
        <Row :gutter="10">
            <Col :md="24" :lg="16">
                <Row class-name="home-page-row1" :gutter="10">
                    <Col :md="12" :lg="24" :style="{marginBottom: '10px'}">
                         <Row class="white_bg slider_part_padding ivu-card">
                            <Col span="12">
                              <div class="mian_chargeback_details">
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">充值总额</div>
                                    <div class="mian_number">¥{{capital.recharge_money}}</div>
                                </div>
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">充值笔数</div>
                                    <div class="mian_number">{{capital.recharge}}</div>
                                </div>
                              </div>
                            </Col>
                            <Col span="12">
                              <div class="mian_chargeback_details">
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">提现金额</div>
                                    <div class="mian_number">¥{{capital.withdraw_money}}</div>
                                </div>
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">提现笔数</div>
                                    <div class="mian_number">{{capital.withdraw}}</div>
                                </div>
                              </div>
                            </Col>
                        </Row>
                    </Col>
                    <Col :md="12" :lg="24">
                    <div class="mian_statistics_contanter white_bg ivu-card ivu-card-bordered">
                        <div class="mian_title_line slider_part_padding">
                            <span class="mian_line_sliderbar"></span>
                            <span class="mian_title">使用统计</span>
                        </div>
                       <Row class="mian_chargeback_details">
                            <Col span="6">
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已出租住宅房源</div>
                                    <div class="mian_number">{{house.type1.rented}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                               <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已出租商铺房源</div>
                                    <div class="mian_number">{{house.type2.rented}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已出租写字楼房源</div>
                                    <div class="mian_number">{{house.type3.rented}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已出租厂房房源</div>
                                    <div class="mian_number">{{house.type4.rented}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已上架住宅房源</div>
                                    <div class="mian_number">{{house.type1.onself}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                               <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已上架商铺房源</div>
                                    <div class="mian_number">{{house.type2.onself}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已上架写字楼房源</div>
                                    <div class="mian_number">{{house.type3.onself}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">已上架厂房房源</div>
                                    <div class="mian_number">{{house.type4.onself}}</div>
                                </div>
                            </Col>
                               <Col span="6">
                                <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">待发布住宅房源</div>
                                    <div class="mian_number">{{house.type1.create}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                               <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">待发布商铺房源</div>
                                    <div class="mian_number">{{house.type2.create}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">待发布写字楼房源</div>
                                    <div class="mian_number">{{house.type3.create}}</div>
                                </div>
                            </Col>
                            <Col span="6">
                                 <div class="mian_line_cl block_box t_c">
                                    <div class="mian_title">待发布厂房房源</div>
                                    <div class="mian_number">{{house.type4.create}}</div>
                                </div>
                            </Col>
                        </Row>
                      </div>  
                    </Col>
                </Row>
            </Col>
            <!-- <Col :md="24" :lg="16" :style="{marginTop: '10px'}" class="statics_chart_containter">
                <Row>
                    <Card :padding="0">
                        <p slot="title" class="card-title">
                            <Icon type="ios-shuffle-strong"></Icon>
                            平台用户数一览
                        </p>
                        <!-- <div class="mian_down_select">
                            <Select v-model="model1" style="width:140px">
                                <Option :value="1" :key="1">时间</Option>
                                <Option :value="2" :key="2">本月份</Option>
                                <Option :value="3" :key="3">过去30天</Option>
                                <Option :value="4" :key="4">过去90天</Option>
                                <Option :value="5" :key="5">过去180天</Option>
                            </Select>
                        </div> -->
                        <!-- <div class="line_chart_contianter">
                            <service-requests></service-requests>
                        </div>
                    </Card>
                </Row>
            </Col> -->
        </Row>
        <!-- <Row :gutter="10" class="margin-top-10 mian_business_conatiner">
            <div class="mian_chargeback_containter ivu-card ivu-card-bordered">
                <div class="mian_title_line slider_part_padding">
                    <span class="mian_line_sliderbar"></span>
                    <span class="mian_title">我的业务</span>
                </div>
                <div class="business_btn_containter white_bg slider_part_padding">
                    <div class="btn_list1">
                    <Button type="ghost" class="myelbtn">录入住宅房源</Button>
                    <Button type="ghost" class="myelbtn">录入商铺房源</Button>
                    <Button type="ghost" class="myelbtn">录入写字楼房源</Button>
                    <Button type="ghost" class="myelbtn">录入厂房房源</Button>
                    <Button type="ghost" class="myelbtn">录入客户信息</Button>
                    <Button type="ghost" class="myelbtn">管理租房评价</Button>
                    <Button type="ghost" class="myelbtn">管理烦租圈</Button>
                    <Button type="ghost" class="myelbtn">线下收款账户</Button>
                    </div>
                    <div class="btn_list2">
                    <Button type="ghost" class="myelbtn">已上架房源</Button>
                    <Button type="ghost" class="myelbtn">待发布房源</Button>
                    <Button type="ghost" class="myelbtn">已出租房源</Button>
                    <Button type="ghost" class="myelbtn">扣款管理</Button>
                    <Button type="ghost" class="myelbtn">创建优惠券</Button>
                    <Button type="ghost" class="myelbtn">上传banner图</Button>
                    <Button type="ghost" class="myelbtn">用户租金缴纳录入</Button>
                    </div>
                </div>
           </div>  
        </Row> -->
    </div>
</template>

<script>
import cityData from './map-data/get-city-value.js';
import homeMap from './components/map.vue';
import dataSourcePie from './components/dataSourcePie.vue';
import visiteVolume from './components/visiteVolume.vue';
import serviceRequests from './components/serviceRequests.vue';
import userFlow from './components/userFlow.vue';
import countUp from './components/countUp.vue';
import inforCard from './components/inforCard.vue';
import mapDataTable from './components/mapDataTable.vue';
import toDoListItem from './components/toDoListItem.vue';
import axios from 'axios'
export default {
    name: 'home',
    components: {
        homeMap,
        dataSourcePie,
        visiteVolume,
        serviceRequests,
        userFlow,
        countUp,
        inforCard,
        mapDataTable,
        toDoListItem
    },
    data () {
        return {
            withhold:{
                totals:0,
                totals_money:0,
                reality:0,
                reality_money:0,
                failed:0,
                failed_money:0
            },
            capital:{
                recharge:0,
                recharge_money:0,
                withdraw:0,
                withdraw_money:0
            },
            house:{
                type1:{
                    rented:0,
                    onself:0,
                    create:0
                },
                type2:{
                    rented:0,
                    onself:0,
                    create:0
                },
                type3:{
                    rented:0,
                    onself:0,
                    create:0
                },
                type4:{
                    rented:0,
                    onself:0,
                    create:0
                },
            },
            count: {
                createUser: 496,
                visit: 3264,
                collection: 24389305,
                transfer: 39503498
            },
            cityData: cityData,
            showAddNewTodo: false,
            newToDoItemValue: '',
            search:{
                withhold:1,
                capital:1
            },
            audit:0,
            withdraw:0
        };
    },
    computed: {
        headImgPath () {
            return sessionStorage.headImg ? sessionStorage.headImg : require('../../images/defaultImg.jpg');
        }
    },
    mounted () {
        // this.getList()
        this.init();
    },
    methods:{
        init(){
            this.audits(),
            this.withholds(),
            this.capitals(),
            this.houses()
        },
        audits(){
            axios.get('home/audit').then(response=>{
                let res = response.data
                if(res.code === 200){
                    this.audit = res.data.audit
                    this.withdraw = res.data.withdraw
                }
            })
        },
        withholds(){
            axios.get('home/withhold',{params:{type:this.search.withhold}}).then(response=>{
                let res = response.data
                if(res.code === 200){
                    this.withhold.totals = res.data.totals
                    this.withhold.totals_money = res.data.totals_money
                    this.withhold.reality = res.data.reality
                    this.withhold.reality_money = res.data.reality_money
                    this.withhold.failed = res.data.failed
                    this.withhold.failed_money = res.data.failed_money
                }
            })
        },
        capitals(){
            axios.get('home/capital',{params:{type:this.search.capital}}).then(response=>{
                let res = response.data
                if(res.code === 200){
                    this.capital = res.data
                }
            })
        },
        houses(){
            axios.get('home/house').then(response=>{
                let res = response.data
                if(res.code === 200){
                    this.house = res.data
                }
            })
        },
        changeWithhold(value){
            this.search.withhold = value
            this.withholds()
        },
        changeCapital(value){
            this.search.capital = value
            this.capitals()
        },
        doAudit(){
            this.$router.push({
                path:'/user/users',
                query:{status:1}
            })
        },
        doWithdraw(){
            this.$router.push({
                path:'/finance/withdraw',
                
            })
        }
    }
};
</script>
